<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table-locale-all.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/extensions/export/bootstrap-table-export.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="../static/css/global.css"  media="all">
   <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="../static/layui/layui.js"></script>
    <script>

   layui.use('layer',function(){
        var layer=layui.layer;

        $("#btn-add").on('click',function(){
        layer.open({
        type:1,
        title: "添加问题",
         area: ['420px', '250px'],
        content:$("#popadd")
        })
        });
   })
</script>

</head>
<body>
<div class="fly-header layui-bg-black">
    <div class="layui-container">
        <ul class="layui-nav fly-nav" style="float:right">
            <li class="layui-nav-item">
                <a href="javascript:;" th:text="${username}">hello，yhx</a>
            </li>
            <li class="layui-nav-item">
                <a th:href="@{/index}">问答</a>
            </li>
            <li class="layui-nav-item"><a th:href="@{/questionlist}">列表</a></li>
            <li class="layui-nav-item">
                <a th:href="@{/logout}">登出</a>
            </li>
        </ul>
    </div>
</div>
<div class="container">
     <span class="fl">
        <a class="layui-btn btn-add btn-default" id="btn-add" data-method="popadd">添加</a>
    </span>

    <!--table table-striped-->
    <table id="table"
           data-toggle="table" class="table table-striped table-container"
           data-locale="zh-CN"
           width="800"
           style="table-layout:fixed;">
        <thead>
        <tr>
            <th data-filed="id">id</th>
            <th data-filed="question">question</th>
            <th data-filed="answer">answer</th>
            <th data-field="operate">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="question:${pageInfo.list}" >
            <td width="100" th:text="${question.id}"></td>
            <td><a  th:text="${question.question}" th:href="@{/question(id=${question.id})}"></a></td>
            <td width="400" th:text="${question.answer}" class="layui-elip"></td>
            <td>
                <a class="layui-btn layui-btn-mini layui-btn-normal" >编辑</a>
                <a class="layui-btn layui-btn-mini layui-btn-danger"  th:href="@{${'deleteQuestion'}(id=${question.id})}">删除</a>
            </td>
        </tr>
        </tbody>
    </table>

    <nav>
        <ul class="pagination">
            <li>
                <a th:href="@{${'list'}(pageNum=1,pageSize=${pageSize})}">
                    <span aria-hidden="true">&lAarr;</span>
                </a>
            </li>
            <li>
                <a th:if="${not isFirstPage}" th:href="@{${'list'}(pageNum=${pageNum-1},pageSize=${pageSize})}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
                <a th:if="${isFirstPage}" href="javascript:void(0);" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>

            <li th:each="pageNo : ${#numbers.sequence(1, totalPages)}" th:class="${pageNum eq pageNo}?'active'">
                <a th:if="${pageNum eq pageNo}" href="javascript:void(0);" >
                    <span th:text="${pageNo}"></span>
                </a>

                <!--a th:if="${not (pageNum eq pageNo)}" th:href="@{${'questionlist'}(pageNum=${pageNo},pageSize=${pageSize})}">
                    <span th:text="${pageNo}"></span>
                </a-->
                <a th:if="${(pageNum-pageNo)<=5 and (pageNo-pageNum)<=4 and not (pageNum eq pageNo)}" th:href="@{${'list'}(pageNum=${pageNo},pageSize=${pageSize})}">
                    <span th:text="${pageNo}"></span>
                </a>
            </li>

            <li>
                <a th:if="${not isLastPage}" th:href="@{${'list'}(pageNum=${pageNum+1},pageSize=${pageSize})}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
                <a th:if="${isLastPage}" href="javascript:void(0);" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li>
                <a th:href="@{${'list'}(pageNum=${totalPages},pageSize=${pageSize})}">
                    <span aria-hidden="true">&rAarr;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>
<div class="layui-row" id="popadd" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" th:action="@{/admin/addQuestion}" method="post" style="margin-top:20px" >
            <div class="layui-form-item">
                <label class="layui-form-label">问题</label>
                <div class="layui-input-block">
                    <input type="text" name="question"  required  lay-verify="required" autocomplete="off" placeholder="请输入问题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">答案</label>
                <div class="layui-input-block">
                    <input type="text" name="answer"  required  lay-verify="required" autocomplete="off" placeholder="请输入答案" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo11">确认修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="layui-row" id="popupdate" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" th:action="@{/admin/updateQuestion}" method="post" style="margin-top:20px" >
            <div class="layui-form-item">
                <label class="layui-form-label">修改问题</label>
                <div class="layui-input-block">
                    <input type="text" name="question"  required  lay-verify="required" autocomplete="off" placeholder="请输入问题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">修改答案</label>
                <div class="layui-input-block">
                    <input type="text" name="answer"  required  lay-verify="required" autocomplete="off" placeholder="请输入答案" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo11">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>